@import url("syntax.less");

body{
    width: 100px;
    height: 100px;
    // background-color: rgb(114, 114, 234);  // Less中的注释，不会被解析到CSS中
    /* CSS中的注释，会被解析到CSS中，不会被浏览器解析 */
    // div{
    //     background-color: red;
    // }
}

// 变量，在变量中可以存储一个任意的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法 @变量名:值;
@w:100px;
@h:100px;
@a:orange;
.box5{
    // 变量的使用
    width: @w;
    height: @h;
    background-color: antiquewhite;
}

@c:box4;
// 类的扩展，作为类名，或者一部分值使用时必须以 @{变量名}的形式使用
.@{c}{
    width: @w;
    height: @h;
    background-color: @a;
    background-image: url("@{c}/1.jpg");
}

// div{
//     // 变量发生重名时，优先使用比较近的变量
//     width: @w;
//     // 可以在变量声明前引用
//     height: @e;
// }
@w:200px;
@e:100px;

div{
    width: @w;
    height: $width;
    background-color: aliceblue;
    margin-bottom: 10px;
}

div{
    font-size: 20px;
}